<template>
	<div class="steps" v-if="isShow">
		<div class="steps-right" :style="stepColor(recordsData)">
			<van-cell :border="false" class="cell-top" :title="recordsData.nodeName" :value="showTime(recordsData)"></van-cell>
			<p class="message-boss">{{recordsData.changerName | s_name}} <span @click="showPopup(recordsData.attach)" style="margin-left: 4px;"
				 v-if="recordsData.comment!==''">意见：{{recordsData.comment | filterComment}}</span>
				<img v-if="recordsData.attach!== ''" @click="showPopup(recordsData.attach)" class="fileImg" src="../assets/img/u1183.png" />
			</p>
			<van-overlay :show="show" @click="show = false">
				<div class="wrapper" @click.stop>
					<p style="padding-bottom: 15px;" v-html="recordsData.comment"></p>
					<p style="color: #1989FA;padding-bottom: 12px;" v-for="item in approvalList" @click="approvalFileDownLoad(item)">{{item.fileName}}</p>
				</div>
			</van-overlay>
		</div>
		<div class="steps-left">
			<van-icon :name="imgSrc(recordsData)" :color="imgColor(recordsData)" />
		</div>
	</div>
</template>

<script>
	import {
		openFile
	} from '@request/api.js'
	import {
		ImagePreview
	} from 'vant';
	export default {
		data() {
			return {
				allColor: {},
				show: false,
				approvalList: []
			}
		},
		props: ['recordsData'],
		created() {
			this.allColor = this.$store.state.allColor
		},
		watch: {
			storeColor: function(val) {
				this.allColor = val
			}
		},
		methods: {
			showPopup(attach) {
				this.show = true;
				if (attach !== '') {
					let arr = attach.split(":")
					let fileItemList = []
					arr.forEach(item => {
						let arr2 = item.split("|")
						fileItemList.push({
							fileName: arr2[1],
							url: arr2[0],
						})
					})
					fileItemList.forEach(item => {
						this.approvalBase64(item)
					})
				}
			},
			approvalFileDownLoad(file) {
				let u = navigator.userAgent
				let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
				let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
				if (isAndroid) {
					if (file.contentType.includes('image')) {
						ImagePreview({
							images: [
								`data:${file.contentType};base64,${file.url}`
							],
							onClose() {},
						});
						var options = {
							image: `data:${file.contentType};base64,${file.url}`,
							imageName: file.fileName,
							success: function(res) {
								alert(JSON.stringify(res));
							}
						}
						jme.album.saveImage(options)
					} else {
						this.$toast('安卓系统不支持该文件格式，请登录PC端操作')
					}
				}
				if (isIOS) {
					var options = {
						'downloadUrl': '',
						'filePath': `data:${file.contentType};base64,${file.url}`,
						'name': file.fileName,
						'size': file.size,
						'type': file.type,
						callback: function(res) {
							alert(JSON.stringify(res));
						}
					};
					jme.file.openDocument(options);
				}
			},
			async approvalBase64(item) {
				this.approvalList = []
				await openFile({
					'_form': this.$route.query.fromId,
					'_num': this.$route.query.num,
					'_idOrPermitted': this.recordsData.id,
					'_fieldName': '_processing_attach',
					'_filePath': item.url
				}).then(res => {
					this.approvalList.push({
						url: res.base64,
						fileName: item.fileName,
						size: res.size,
						type: res.ext,
						'_filePath': item.url,
						'contentType': res.contentType
					})
				})
			},
		},
		computed: {
			showTime(type){
				return function(type){
					if(type.startTime !== ''){
						return type.startTime
					}else{
						return type.createDatetime
					}
				}
			},
			isShow() {
				return this.recordsData.isHasChild === 1 && this.recordsData.isClose === 2 && this.recordsData.isEnd === 2 && this.recordsData.isSubmit === 2 ? false :
					true
			},
			storeColor() {
				return this.$store.state.allColor
			},
			stepColor() {
				return function(val) {
					if (val.isClose === 1) {
						return {
							'background-color': this.allColor.exit_bg_color,
							'border-left': `4px solid ${this.allColor.exit_icon_color}`
						}
					} else if (val.oprBtn === 'btn6') {
						return {
							'background-color': this.allColor.exit_bg_color,
							'border-left': `4px solid ${this.allColor.exit_icon_color}`
						}
					} else if (val.isCancel === 1) {
						return {
							'background-color': this.allColor.cancel_bg_color,
							'border-left': `4px solid ${this.allColor.cancel_icon_color}`
						}
					} else if (val.isSubmit === 1) {
						return {
							'background-color': this.allColor.other_bg_color,
							'border-left': `4px solid ${this.allColor.other_icon_color}`
						}
					} else {
						if (val.isEnd === 2) {
							if (val.isComplete === 2) {
								return {
									'background-color': this.allColor.wait_bg_color,
									'border-left': `4px solid ${this.allColor.wait_icon_color}`
								}
							} else {
								return {
									'background-color': this.allColor.other_bg_color,
									'border-left': `4px solid ${this.allColor.other_icon_color}`
								}
							}
						} else {
							return {
								'background-color': this.allColor.other_bg_color,
								'border-left': `4px solid ${this.allColor.other_icon_color}`
							}
						}
					}
				}
			},
			imgColor() {
				return function(val) {
					if (val.isClose === 1) {
						return this.allColor.exit_icon_color
					} else if (val.oprBtn === 'btn6') {
						return this.allColor.exit_icon_color
					} else if(val.isCancel === 1){
						return this.allColor.cancel_icon_color
					} else if(val.isSubmit === 1){
						return this.allColor.other_icon_color
					} else {
						if (val.isEnd === 2) {
							if (val.isComplete === 2) {
								return this.allColor.wait_icon_color
							} else {
								return this.allColor.other_icon_color
							}
						} else {
							return this.allColor.other_icon_color
						}
					}
				}
			},
			imgSrc() {
				return function(val) {
					if (val.isClose === 1) {
						return 'clear'
					} else if (val.oprBtn === 'btn6') {
						return 'clear'
					} else if(val.isCancel === 1){
						return 'stop-circle'
					} else if(val.isSubmit === 1){
						return 'checked'
					}
					else {
						if (val.isEnd === 2) {
							if (val.isComplete === 2) {
								return 'clock'
							} else {
								return 'checked'
							}
						} else {
							return 'checked'
						}
					}
				}
			}
		},
		filters: {
			s_name(val) {
				let arr = val.split(',')
				if (arr.length <= 2) {
					return val
				} else {
					val = `${arr[0]},${arr[1]}...`
					return val
				}
			},
			filterComment(val){
				val = val.replace(/<[^>]+>|&[^>]+;/g,"").trim();
				return val
			}
		}
	}
</script>

<style lang="scss" scoped>
	.steps {
		padding: 0 vw(14);
		height: vw(66);
		display: flex;
		flex-direction: row-reverse
	}

	.steps-left {
		width: 6%;
		border-left: vw(2) solid $line-2;
		position: relative;
	}

	.steps-right {
		width: 90%;
		height: vw(54);
		position: relative;
	}

	.message-boss {
		font-size: vw(14);
		padding-left: vw(14);
		line-height: vw(25);
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		width: 84%;
	}

	.cell-top {
		background-color: rgba(0, 0, 0, 0);
	}

	.cell-top {
		padding: vw(5) vw(16) 0 vw(14);
	}

	.van-icon {
		font-size: vw(24);
		top: vw(12);
		right: vw(13);
		z-index: 1;
	}

	.van-overlay {
		z-index: 99;
		background-color: #fff;
		display: flex;
		padding: 0 vw(10);
		align-items: center;
		justify-content: center;
		word-break: break-all;
	}

	.van-cell {
		/deep/ .van-cell__title {
			font-size: vw(14);
			font-weight: 550;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		/deep/ .van-cell__value {
			font-size: vw(12);
		}
	}

	.fileImg {
		position: absolute;
		width: vw(17);
		right: vw(12);
		bottom: vw(7);
	}
</style>
